<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
// @codingStandardsIgnoreFile
?>
<?php
if ($exist = $block->getRecentlyComparedProducts()) {
    $type = 'widget-compared';

    $image = 'recently_compared_products_images_only_widget';
    $title = __('Recently Compared');
    $items = $exist;

    $showWishlist = false;
    $showCompare = false;
    $showCart = false;
    $rating = false;
    $description = false;
}
?>
<?php if ($exist): ?>
    <div class="block-title-main">
        <h2><?php /* @escapeNotVerified */ echo $title; ?></h2>
        <div class="title-border"></div>
    </div>
    <div style="float: left;width:100%;" class="block pad-main-bottom widget block-compared-products-images">
        <div class="block-content">
            <?php $suffix = $block->getNameInLayout(); ?>
            <ol style="margin: 30px 0 0;" id="widget-compared-<?php /* @escapeNotVerified */ echo $suffix; ?>" class="product-slider product-items product-items-images">
                <?php
                $i = 0;
                foreach ($items as $_product):
                    ?>
                    <li class="product-item">
                        <a class="product-item-photo" href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
                           title="<?php /* @escapeNotVerified */ echo $block->stripTags($_product->getName(), null, true) ?>">
                               <?php echo $block->getImage($_product, $image)->toHtml(); ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ol>
        </div>
    </div>
    <script>
        require(['jquery', 'cpowlcarousel'], function ($) {
            $(document).ready(function () {
                $(".product-slider").owlCarousel({
                    items: 5,
                    itemsDesktop: [1080, 4],
                    itemsDesktopSmall: [860, 3],
                    itemsTablet: [768, 3],
                    itemsTabletSmall: [639, 2],
                    itemsMobile: [360, 2],
                    pagination: false,
                    navigationText: ["<div class='lft-btn'><i class='fa fa-angle-left'></i></div>", "<div class='rgt-btn'><i class='fa fa-angle-right'></div>"],
                    navigation: true,
                });
            });
        });
    </script>
<?php endif; ?>
